<template>
  <div id="app">
    <div id="nav">
      <span>
        <router-link to="/index">基础index</router-link>
      </span>
      <!-- <span><router-link to="/index1">所有index内容练习</router-link></span> -->
      <span>
        <router-link to="/index2">基础 index2</router-link>
      </span>
      <span>
        <router-link to="/index3">基础index3</router-link>
      </span>
      <span>
        <router-link to="/index4"> 基础index4</router-link>
      </span>
      <span>
        <router-link to="/index5">基础index5</router-link>
      </span>
      <span>
        <router-link to="/index6">基础index6</router-link>
      </span>
      <!-- <span><router-link to="/login">登陆页面</router-link></span> -->
      <span>
        <router-link to="/chacao">插槽</router-link>
      </span>
      <span>
        <router-link to="/bianjie">边界</router-link>
      </span>
      <span>
        <router-link to="/jubu">自定义组件</router-link>
      </span>
      <span>
        <router-link to="/jsx">jsx</router-link>
      </span>
      <span>
        <router-link to="/guolv">过滤器</router-link>
      </span>
      <span>
        <router-link to="/axios">axios请求</router-link>
      </span>
        <span>
        <router-link to="/axios2">封装统一axios请求</router-link>
      </span>
      <span>
        <router-link to="/swiper">swiper</router-link>
      </span>
      <span>
        <!-- namerouter这个name不是路由的而是input输入框的，所以你最好输入框也是同样的名字，后期你自己可以研究 -->
        <!-- <router-link :to="'/routerpage/namerouter/'+namerouter+'/age/'+age">动态路由</router-link> -->
        <!-- 命名路由的好处就在于传递参数时候使用 -->
          <router-link exact :to="{name:'routerpage',params:{namerouter:namerouter,age:age}}">动态路由之命名路由使用</router-link>
      </span>
       <span>
         <!-- 命名路由就是to改为name跳转{name:namerouter} 记得要加单引号name后面的路由-->
        <router-link :to="{name:'nameRouter'}">命名路由</router-link>
      </span>
       <span>
         <!-- 命名路由就是to改为name跳转{name:namerouter} 记得要加单引号name后面的路由-->
        <router-link :to="{name:'pushrouter'}">push进入路由index</router-link>
      </span>
      <span>
       
        <router-link :to="{name:'qiantaorouter'}">嵌套路由</router-link>
      </span>
         <span>
            <!-- <router-link :to="{name:'zujianchuancan'}">组件传参</router-link> -->
          <router-link :to="{name:'zujianchuancan',params:{narouterr:narouterr,agers:agers}}">组件传参</router-link>
      </span>
         <span>
          <router-link to="/zujianrouter">组件内的路由守卫</router-link>
      </span>
         <span>
          <router-link to="/metarouter">meta判断</router-link>
      </span>
       <span>
          <router-link to="/scrollpage">滚动行为</router-link>
      </span>
         <span>
          <router-link to="/axioskuayu">axios跨域</router-link>
      </span>
       <span>
          <router-link to="/wenti">本项目的问题</router-link>
      </span>
      <span>
          <router-link to="/login">mock登陆</router-link>
      </span>
      <span>
          <router-link to="/eventBus">eventBus事件总线</router-link>
      </span>
       <span>
          <router-link to="/yiqingpage">练习疫情天行数据在zhihuvidoe2中</router-link>
      </span>

    </div>
    <input type="text" v-model="namerouter" placeholder="动态路由之命名路由使用">
    <input type="text" v-model="narouterr" placeholder="组件传参">
    <router-view />

    <!-- APP.vue应该只有一个路由页面，但是为了展示下面的keep-alive，我不注释了，自己碰到理解一下 -->
    <!-- 动态组件&异步组件 -->
    <!-- 下面这个是当你两个组件来回切换，但是内容不会被缓存 -->
    <!-- <component :is="currentView"></component> -->
    <!-- 
      非活动组件将被缓存 上面的点击切换并不会缓存加上 keep-alive
    使用就是把需要缓存的包裹在keep-alive中
    -->
    <keep-alive>
      <p>为了展示keep-alive</p>
      <component :is="currentView" keep-alive></component>
    </keep-alive>
    <button @click="zujianA">组件切换为a</button>
    <button @click="zujianB">组件切换为b</button>
  </div>
</template>

<script>
// 引入组件
import zujianA from "./views/zujian/zujianA";
// import zujianB from "./views/zujian/zujianB";
// 同时上面的zujianB是同步加载，但是项目过大时候一定是异步加载，把组件分成很多小模块。至于如何看是不是异步加载了，你点击组件b看控制台Network的All所有请求，把请求关闭，点击组件b，然后会产生一个abuout.js请求，这个就是b的请求，若还是不知道是不是，那么你点击about.js看右侧的Preview这个请求，拉最后看是哪个页面，，或者这个控制器里面搜这个组件的页面看能不能搜到
// 异步加载方案，点击了才请求，不点击这个组件就不加载，这样不会造成页面的卡顿。尤其大型项目 把上面的import zujianB from "./views/zujian/zujianB";
const zujianB = () =>
  import(/* webpackChunkName: "about" */ "./views/zujian/zujianB.vue");
export default {
  data() {
    return {
      currentView: zujianA ,//component是动态组件，指向组件A也就是zujianA
      namerouter:"",
      age:20,
      narouterr:"1", //组件传参,有待完善。这个不写参数，路径为/,那么他一直高亮导航
      agers:200
    };
  },
  components: {
    zujianA,
    zujianB
  },
  methods: {
    // 点击a按钮，组件切换为a
    zujianA() {
      this.currentView = zujianA;
    },
    zujianB() {
      this.currentView = zujianB;
    }
  }
};
</script>
<style lang="less">
span {
  margin-right: 30px;
}
// 高亮css，选中则红色
// 当前正被选中的路由
.router-link-exact-active{
color: fuchsia;
}
// 匹配所有关于这个路由
.router-link-active{
color: red;
}
span{margin-bottom: 20px;display: inline-block;}
</style>